<template>
  <div class="ranking-pivot">
    <!-- <el-row :gutter="20">
            <el-col :span="8"
                ><div class="grid-content bg-purple"></div
            ></el-col>
            <el-col :span="8"
                ><div class="grid-content bg-purple"></div
            ></el-col>
            <el-col :span="8"
                ><div class="grid-content bg-purple"></div
            ></el-col>
        </el-row> -->

    <el-form
      :inline="true"
      :model="formData"
      class="form-inline"
      label-position="top"
    >
      <el-form-item label="风险输入地">
        <city-selector v-model="formData.country" style="width: 100%" />
      </el-form-item>
      <el-form-item label="风险来源地">
        <city-selector v-model="formData.from" style="width: 100%" />
      </el-form-item>
      <el-form-item label="时间" prop="date">
        <el-date-picker
          v-model="formData.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          style="width: 300px"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" class="data-table" :height="tableHeight">
      <el-table-column
        v-for="{ key, label, width, type, sortable } in columns"
        :key="key"
        :label="label"
        :width="width"
        :sortable="sortable"
        :prop="key"
        :height="tableHeight"
      >
        <template slot-scope="scope">
          <div v-if="type == 'date'">
            <span>{{ scope.row[key] }}</span>
          </div>
          <div v-else-if="type == 'color'" class="column-color">
            <span
              :style="`color: ${scope.row[key].color};background-color: ${
                scope.row[key].color + '40'
              };`"
              >{{ scope.row[key].value }}</span
            >
          </div>
          <div v-else-if="type == 'ratio'" class="column-ratio">
            <span
              :style="`color: ${
                scope.row[key].icon == 'up' ? '#CC3D55' : '#31A37D'
              }`"
              >{{ scope.row[key].value }}</span
            >
            <svg-icon
              :style="`color: ${
                scope.row[key].icon == 'up' ? '#CC3D55' : '#31A37D'
              }`"
              :icon-class="'arraw-' + scope.row[key].icon"
            ></svg-icon>
          </div>
          <div v-else-if="type == 'chart'" class="column-chart">
            <tiny-chart
              v-if="scope.row[key] && scope.row[key].length > 2"
              :values="scope.row[key]"
            />
          </div>
          <div v-else-if="type == 'icon'" class="column-icon">
            <svg-icon :icon-class="scope.row[key]"></svg-icon>
          </div>
          <div v-else class="column-normal">
            <span>{{ scope.row[key] }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right">
      <el-pagination
        @current-change="pageChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pagination"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import TinyChart from "../components/TinyChart/index.vue";
import CitySelector from "../components/CitySelector/index.vue";
import dayjs from "dayjs";
import { listPage, trendArea } from "../api/risk";

export default {
  props: ["default"],
  components: { TinyChart, CitySelector },
  computed: {},
  data() {
    const now = dayjs();
    return {
      formData: {
        country: this.default.country,
        from: this.default.from,
        date: [],
      },
      //   columns: [
      //     {
      //       key: "c1",
      //       label: "#",
      //       width: 45,
      //       type: "",
      //     },
      //     {
      //       key: "destinationAreaName",
      //       label: "风险输入地",
      //       width: 75,
      //       type: "",
      //     },
      //     {
      //       key: "originAreaName",
      //       label: "风险来源地",
      //       width: 75,
      //       type: "",
      //     },
      //     {
      //       key: "transfer1",
      //       label: "中转地1",
      //       width: 100,
      //       type: "",
      //     },
      //     {
      //       key: "transfer2",
      //       label: "中转地2",
      //       width: 100,
      //       type: "",
      //     },
      //     {
      //       key: "stopover",
      //       label: "经停地/目的地",
      //       width: 95,
      //       type: "color",
      //     },
      //     {
      //       key: "hasTransfer",
      //       label: "是否有中转地",
      //       width: 75,
      //       type: "color",
      //     },
      //     {
      //       key: "date",
      //       label: "日期",
      //       width: 120,
      //       type: "date",
      //     },
      //     {
      //       key: "flightNum",
      //       label: "人次",
      //       width: 100,
      //       type: "ratio",
      //       sortable: true,
      //     },
      //     {
      //       key: "flightNum",
      //       label: "新增月环比",
      //       width: 120,
      //       type: "ratio",
      //       sortable: true,
      //     },
      //     {
      //       key: "trend",
      //       label: "日增趋势图",
      //       width: 142,
      //       type: "chart",
      //     },
      //   ],
      columns: [
        {
          key: "num",
          label: "#",
          width: 45,
          type: "",
        },
        {
          key: "riskPlace",
          label: "国家或地区",
          width: 175,
          type: "",
        },
        {
          key: "riskLevel",
          label: "风险等级",
          width: 100,
          type: "",
        },
        {
          key: "riskScore",
          label: "风险值",
          width: 100,
          type: "",
        },
        {
          key: "share",
          label: "贡献占比",
          width: 100,
          type: "",
          //   sortable: true,
        },
        {
          key: "date",
          label: "日期",
          width: 120,
          type: "date",
        },
        {
          key: "trend",
          label: "日增趋势图",
          width: 200,
          type: "chart",
        },
      ],
      tableData: Array.from({ length: 100 }, (v, i) => ({
        c1: i + 1,
        c2: {
          value: "v" + i,
          color: "#2E4CB2",
        },
        c3: now.add(i, "day").format("YYYY-MM-DD"),
        c4: {
          value: "234.234",
          icon: i % 2 ? "up" : "down",
        },
        c5: "us",
        c6: [],
      })),
      currentPage: 1,
      pageSize: 10,
      total: 100,
      tableHeight: 300,
    };
  },
  mounted() {
    this.$nextTick(() => {
      const rect = this.$el.getBoundingClientRect();
      this.tableHeight = rect.height - 180;

      this.fetchData();
    });
  },
  methods: {
    fetchData() {
      const { country, from, date } = this.formData;
      if (country == "" || from == "") return;

      this.loading = this.$loading({
        target: this.$el,
      });
      Promise.all([
        listPage({
          condition: {
            ruleId: this.default.ruleId,
            startDate: date && date.length > 0 ? date[0] : "",
            endDate: date && date.length > 1 ? date[1] : "",
            originArea: from?.code == "null" ? "" : from?.code,
            destinationArea: country?.code == "null" ? "" : country?.code,

            // startDate: "",
            // endDate: "",
            // originArea: "",
            // destinationArea: "",
          },
          page: this.currentPage,
          pageSize: this.pageSize,
          ids: [],
          ifNeedPage: true,
        }),
      ])
        .then((res) => {
          const { data: rankRes } = res[0];
          const { total, records } = rankRes;
          this.tableData = records.map((r, i) => ({
            num: this.pageSize * (this.currentPage - 1) + i,
            riskPlace: r.originAreaName || "",
            riskScore: r?.riskScore ?? 0,
            riskLevel: r.riskLevel || "",
            riskLevelColor: r.riskLevelColor || "",
            date: r.date,
            share: r.share,
            icon: String(r.originArea || r.area)
              .substring(0, 2)
              .toUpperCase(),
            // trend:
            //   r?.trend?.slice(0, 28).map((v) => v.value?.riskScore ?? 0) ?? [],
            trend: r?.trend
            //   ?.filter(
            //     (v) =>
            //       !isNaN(v.value?.riskScore) &&
            //       typeof v.value?.riskScore === "number"
            //   )
              .map((v) => v.value?.riskScore),
          }));

          //   console.log("n:", records.find(r => r.originAreaName == "澳大利亚").trend.slice(0, 28).map((v) => v.value?.riskScore ?? 0))
          this.total = total;
        })
        .finally(() => {
          this.loading.close();
        });
    },
    pageChange() {
      this.fetchData();
    },
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        this.fetchData();
      },
      deep: true,
    },
    // formData() {
    //   this.fetchData();
    // },
  },
};
</script>
<style lang="scss">
.ranking-pivot {
  padding: 16px;
  gap: 16px;

  //   width: calc(100% - 16px);
  // max-width: 1024px;
  height: 504px;

  .form-inline {
    width: 100%;
    display: flex;
    .city-selector-main .selected-input {
      width: 100%;
    }

    .el-date-editor .el-range-separator {
      width: 21px;
    }
    .el-date-editor .el-range-input {
      width: 35%;
    }
  }

  .data-table {
    width: 100%;
    // height: calc(100% - 125px);
    border: 1px solid #e6e9f2;
    border-radius: 5px;
  }

  /* N9 */
  background: #ffffff;

  .el-table__footer-wrapper,
  .el-table__header-wrapper {
    // height: 56px;

    /* N6 */
    // border-width: 1px 0px 2px 0px;
    // border-style: solid;
    // border-color: #e6e9f2;
    // background: #f7f9fc;
  }

  .el-table td,
  .el-table th.is-leaf {
    // display: flex;
    // flex-direction: row;
    // align-items: center;
    // padding: 14px 12px;
    height: 52px;

    /* H4-14px */
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 48px;
    padding: 0;

    color: #596080;
    background: #f7f9fc;
  }
  .el-table__header-wrapper .cell {
    // height: 34px;
    // line-height: 34px;
    line-height: 1.2;
  }

  .pagination {
    margin-top: 10px;
  }

  .column-normal {
    height: 20px;
    line-height: 18px;

    /* Base/UI */
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;

    /* N1 */
    color: #1f264d;
  }
  .column-color {
    // height: 20px;
    /* Base/UI */
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    // line-height: 20px;
    color: #1f264d;
    span {
      padding: 2px 8px;
      border-radius: 2px;
    }
  }
  .column-ratio {
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 3px;

    svg {
      font-size: 12px;
    }
  }
  .column-chart {
    height: 40px;
  }
}
</style>
